<template>
  <div class="saying-manage_page">
       <List  item-layout="vertical" :border='true'>
        <ListItem v-for="(item,index) in data" :key="item.title">
            {{ item.saying }}
            <ListItemMeta  :description="item.created_time" />
            <template slot="action">
                <li>
                    <a  @click.prevent="edt(index)">编辑</a>
                </li>
                <li>
                    <a  @click.prevent="del(index)">删除</a>
                </li>
            </template>
        </ListItem>
    </List>
    <Page :total="total" show-total @on-change='currentPage' style="margin-top:6px" :page-size='limit'/>
    <Modal
        v-model="modal"
        :title="title"
        :loading="loading"
        @on-ok="asyncOK()">
        <div v-html="content"></div>
    </Modal>
  </div>
</template>

<script>
export default {
   data () {
      return {
        data: [],
        current:0,//当前页数
        limit:5,//每页的数据
        total:10,//总数
        modal:false,
        title:'',
        content:'',
        loading: true,
        flag:true,
        index:1,
        formItem: {
              saying: ''
        },
        ruleInline: {
            saying: [
                { required: true, message: '请按要求填写语录',max:200, trigger: 'blur' }
            ],
          
        }

      }
  },
  methods:{
    init(){
      const that = this
      this.$axios.get('/api/manage/saying/get',{params:{page:this.current,limit:this.limit}}).then(res =>{
        that.data = res.data.data
        that.total = res.data.total
      })
    },
    currentPage(page){
      this.current = page-1;
      this.init()
    },
    del(index){
      this.index =index
      this.modal = true;
       this.flag = true
      this.title = '删除语录'
      this.content = `${this.data[index].saying}<br><p style="color:red">确认要删除该语录？</p>`
    },
    edt(index){
      this.index =index
      this.modal = true;
      this.flag = false
      this.title = '编辑语录'
      this.content = `
      <textarea rows="3" cols="60" id='edtValue'>${this.data[index].saying}</textarea>
        <br><p style="color:red">点击确认修改语录</p>`
      
    },
    asyncOK(){
      if(this.flag){
        const that = this
        this.$axios.post('/api/manage/saying/del',{_id:this.data[this.index]._id}).then(res =>{
          setTimeout(() => {
              this.modal = false;
          }, 500);
          if(res.data.err_code == 2){
              that.$Message.error('权限不足！');
          }else if(res.data.err_code == 1){
              that.$Message.error('你好像被开除了！');
          }else if(res.data.err_code == 0){
              that.$router.push('/login')
          }else if(res.data.err_code == 4){
              that.$Message.error('找不到要删除的语录！');
          }else if(res.data.err_code == 3){
              that.$Message.success('语录删除成功！');
              that.data.splice(that.index, 1);
          }else{
              that.$Message.error('语录删除失败！')
          }
        })
      }else{
        let str = document.getElementById('edtValue')
        if((str.value.length >0) && (str.value.length <201)){
          let that = this
            this.$axios.post('/api/manage/saying/edt',{saying:str.value,_id:this.data[this.index]._id}).then(res =>{
              setTimeout(() => {
                this.modal = false;
              }, 500);
               if(res.data.err_code == 2){
                    that.$Message.error('权限不足！');
                }else if(res.data.err_code == 1){
                    that.$Message.error('你好像被开除了！');
                }else if(res.data.err_code == 0){
                    that.$router.push('/login')
                }else if(res.data.err_code == 4){
                    that.$Message.error('参数有误！');
                }else if(res.data.err_code == 3){
                    that.$Message.success('语录修改成功！');
                    that.init()
                }else{
                    that.$Message.error('语录修改失败！')
                }
            })
        }else{
          this.$Message.error('输入的语录长度有误！')
          this.modal = false;
          return;
        }
      }

    }
  },
  mounted(){
    this.init()
  }
}
</script>

<style scoped>
  .ivu-modal-body textarea{
    border: none;
    outline: none
  }
</style>